<template>
	<div>
		<Header/>
		<!-- 该组件会根据不同的访问路径，渲染不同的组件 -->
		<router-view></router-view>
	</div>
</template>

<script>
import PubSub from 'pubsub-js';

import Header from './components/Header';

export default {
	name: "App",
	components: {
		Header
	},
	methods: {
		// 页面滚动的事件，滚动到底部时PubSub发送消息
		scrollBottom() { 
			let timer = null;
			return () => {
				clearTimeout(timer);
				timer = setTimeout(() => {
					let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					let clientHeight = document.documentElement.clientHeight;
					let scrollHeight = document.documentElement.scrollHeight;
					if (scrollTop > 0 && scrollTop + clientHeight >= scrollHeight) {
						PubSub.publish('scrollBottom');
					}
				}, 500);
			}
		}
	},
	mounted(){
		window.addEventListener('scroll', this.scrollBottom());
	},
	destroyed() { 
		window.removeEventListener('scroll', this.scrollBottom());
	}
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}
</style>
	